<template>
  <div class="next-vote" v-show="show">
    <img src="../assets/time.png" alt="" v-show="showIcon">
    <span class="big-text">{{bigText}}</span>
    <span class="small-text">{{smallText}}</span>
  </div>
</template>

<script>
import { paddingZero } from '../../../common/utils'

export default {
  props: {
    timeType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      showIcon: false,
      bigText: '',
      smallText: '',
      show: false
    }
  },
  mounted() {
  },
  methods: {
    update() {
      if (!this.$getDeviceInfo().isWeiXin) {
        return
      }
      const catid = this.$route.query.catid
      const voteTime = window.localStorage.getItem(catid + 'VoteTime')
      let nextVoteTime
      if (voteTime) {
        const now = Date.now() / 1000
        nextVoteTime = parseInt(voteTime) + 1800 * this.timeType + 60
        if (nextVoteTime > now) { // 时间还没到 还不可以投票
          this.show = true
        } else {
          window.localStorage.removeItem(this.catid + 'VoteTime')
          return
        }
      } else {
        return
      }
      if (this.timeType === 1 || this.timeType === 2) {
        nextVoteTime = new Date((parseInt(voteTime) + 1800 * this.timeType + 60) * 1000)
        let hh = paddingZero(nextVoteTime.getHours())
        let mm = paddingZero(nextVoteTime.getMinutes())
        if (parseInt(hh) !== 0) {
          this.showIcon = true
          this.bigText = hh + ':' + mm
          this.smallText = '可继续投票！'
        } else {
          this.bigText = ''
          this.smallText = '时间不够啦，请明天再来吧！'
          this.showIcon = false
        }
      }
      if (this.timeType === 3) {
        this.showIcon = false
        this.bigText = '明天'
        this.smallText = '可继续投票！'
      }
      if (this.timeType === 4) {
        this.showIcon = false
        this.bigText = '本期活动'
        this.smallText = '投票次数已用完！！'
      }
      this.show = true
    }
  }
}
</script>

<style scoped lang="scss">
.next-vote {
  position: absolute;
  top: 0.45rem;
  right: 0.35rem;
  img {
    height: 0.26rem;
    width: auto;
    margin-right: 0.15rem;
  }
  span {
    color: #fff;
  }
  .big-text {
    font-size: 0.34rem;
    font-weight: 700;
    margin-right: 0.15rem;
  }
  .small-text {
    font-size: 0.22rem;
    font-weight: 700;
  }
}
</style>
